<template >
	<div class="contain" >
		<div class="contain-header">
			<el-breadcrumb  separator="/">
				<el-breadcrumb-item>物流管理</el-breadcrumb-item>
				<el-breadcrumb-item>物流设置</el-breadcrumb-item>
			</el-breadcrumb>
		</div>
		<div class="logistics-body">
			<div class="body-header">
				<el-input placeholder="请输入内容" v-model="pageData.name" clearable @clear="clear" size="small" style="width: 300px;margin-right: 10px" class="input-with-select">
					<el-button slot="append" icon="el-icon-search" size="small" @click="searchList">搜 索</el-button>
				</el-input>
				<el-button type="primary" icon="el-icon-plus" size="small" @click="addDialog = true">添 加</el-button>
			</div>
			<div class="body-table">
				<el-table
						:data="tableData"
						stripe
						style="width: 100%">
					<el-table-column
							align="center"
							prop="name"
							label="物流公司名称">
					</el-table-column>
					<el-table-column
							align="center"
							label="服务项目">
						<template slot-scope="scope">
							<el-checkbox-group v-model="scope.row.projectList">
								<el-checkbox label="1" disabled>包装</el-checkbox>
								<el-checkbox label="2" disabled>运输</el-checkbox>
								<el-checkbox label="3" disabled>报关</el-checkbox>
							</el-checkbox-group>
						</template>
					</el-table-column>
					<el-table-column
							align="center"
							label="授权状态">
						<template slot-scope="scope">
							<el-tag :type="scope.row.authorizationStatus === 1? '' : 'danger' ">{{scope.row.authorizationStatus === 1? '是' : '否'}}</el-tag>
						</template>
					</el-table-column>
					<el-table-column
							align="center"
							prop="setTime"
							label="日期">
					</el-table-column>
					
					<el-table-column
							align="center"
							label="操作">
						<template slot-scope="scope">
							<el-button type="warning " size="mini" @click="openEditDialog(scope.row.id)">编 辑</el-button>
							<el-button type="danger " size="mini" @click="deleteOpen(scope.row.id)">删 除</el-button>
						</template>
					</el-table-column>
				</el-table>
			</div>
			<div class="body-page">
				<el-pagination
						background
						layout="prev, pager, next"
						@current-change="handleCurrentChange"
						:page-size="pageData.pageSize"
						:total="total">
				</el-pagination>
			</div>
		</div>
<!--		新增的弹框-->
		<el-dialog
				title = "物流商信息"
				:visible.sync = "addDialog"
				width = "30%"
				center
				>
			<div>
				<el-form  label-width = "100px" >
					<el-form-item label="物流公司名称:">
						<el-input  placeholder="请输入物流公司名称" v-model="addData.name" ></el-input>
					</el-form-item>
					<el-form-item label="服务项目:">
						<el-checkbox-group v-model="addData.projectList">
							<el-checkbox :label="1" >包装</el-checkbox>
							<el-checkbox :label="2" >运输</el-checkbox>
							<el-checkbox :label="3" >报关</el-checkbox>
						</el-checkbox-group>
					</el-form-item>
					<el-form-item label="授权状态:">
						<el-switch v-model="addData.authorizationStatus" :active-value="1" :inactive-value="0"  active-color="#13ce66" inactive-color="#ccc" active-text="是" inactive-text="否"></el-switch>
					</el-form-item>
					<el-form-item label="日期:">
						<el-date-picker v-model="addData.setTime"  value-format="yyyy-MM-dd" type = "date" placeholder = "请选择日期"  ></el-date-picker >
					</el-form-item>
				</el-form >
			</div>
			<span slot = "footer" class = "dialog-footer" >
				<el-button @click = "addDialog = false"  size="small">取 消</el-button >
				<el-button type = "primary" @click = "newlyAdded"  size="small">确 定</el-button >
		  	</span >
		</el-dialog >
<!--		编辑的弹框-->
		<el-dialog
				title = "物流商信息"
				:visible.sync = "editDialog"
				width = "30%"
				center
		>
			<div>
				<el-form  label-width = "100px" >
					<el-form-item label="物流公司名称:">
						<el-input  placeholder="请输入物流公司名称" v-model="editData.name" ></el-input>
					</el-form-item>
					<el-form-item label="服务项目:">
						<el-checkbox-group v-model="editData.projectList">
							<el-checkbox label="1" >包装</el-checkbox>
							<el-checkbox label="2" >运输</el-checkbox>
							<el-checkbox label="3" >报关</el-checkbox>
						</el-checkbox-group>
					</el-form-item>
					<el-form-item label="授权状态:">
						<el-switch v-model="editData.authorizationStatus" :active-value="1" :inactive-value="0"  active-color="#13ce66" inactive-color="#ccc" active-text="是" inactive-text="否"></el-switch>
					</el-form-item>
					<el-form-item label="日期:">
						<el-date-picker v-model="editData.setTime"  value-format="yyyy-MM-dd" type = "date" placeholder = "请选择日期"  ></el-date-picker >
					</el-form-item>
				</el-form >
			</div>
			<span slot = "footer" class = "dialog-footer" >
				<el-button @click = "editDialog = false"  size="small">取 消</el-button >
				<el-button type = "primary" @click="edit"  size="small">确 定</el-button >
		  	</span >
		</el-dialog >
	</div>
</template >

<script >
    import {logisticsPage, logisticsAdd, logisticsById, logisticsEdit, deleteLogisticsById} from "../api/logisticsModule";

    export default {
        name: "logisticsSettings",
		data(){
            return{
                addDialog:false,
				editDialog:false,
				pageData:{
                    name: "",
                    pageIndex: 1,
                    pageSize: 10
				},
                tableData: [],
				total:null,
				addData:{
                    authorizationStatus:null,
					name:'',
                    projectList:[],
                    setTime:''
				},
				editData:{}
			}
		},
		mounted() {
            this.getPage()
        },
        methods:{
            //删除
            deleteOpen(id){
                this.$confirm('此操作将永久删除该项,是否继续?', '删除', {
                    confirmButtonText:'确定',
					cancelButtonText:'取消',
					type:'warning'
				}).then(() => {
				   deleteLogisticsById(id).then( data => {
                       console.log(data)
					   if (data.data.code === 200) {
					       this.$message.success(data.data.message)
						   this.getPage()
					   }
				   })
				}).catch(()=>{
				    this.$message({
						type:'info',
						message:'撤销删除!'
					})
				})
			},
			//查询列表
			async getPage(){
                const { data } = await logisticsPage(this.pageData)
				if (data.code === 200) {
                   	this.tableData = data.data.data
					this.total = data.data.total
				}
			},
			//搜索
            searchList() {
              if (this.pageData.name) {
                this.getPage()
			  }else {
                  this.$message.warning('请填写名称')
			  }
			},
			//清空搜索框
            clear(){
                this.pageData.name = ''
				this.pageData.pageIndex = 1
				this.pageData.pageSize = 10
				this.getPage()
			},
			//分页
            handleCurrentChange(val) {
                this.pageData.pageIndex = val
                this.getPage()
            },
			//新增物流公司
            async newlyAdded(){
              	if (this.addData.name && this.addData.projectList.length !== 0 && this.addData.setTime) {
                    const { data } = await logisticsAdd(this.addData)
                    if (data.code === 200) {
                        console.log(JSON.stringify({
                            id: 100002,
                            flag: true
                        }))
                        this.$message.success(data.message)
                        this.addDialog = false
                        console.log(JSON.stringify({
                            id: 100002,
                            flag: true
                        }))
                        this.addData = {
                            authorizationStatus:null,
                            name:'',
                            projectList:[],
                            setTime:''
						}
                        await this.getPage()
                    }
				} else {
              	    this.$message.error('请将参数填写完整!!!')
				}
				
			},
			//编辑弹框
            async openEditDialog(id){
                console.log(id)
				const { data } = await logisticsById(id)
				if (data.code === 200) {
                   
                    this.editDialog = true
				    this.editData = data.data
				}
			},
			//编辑
            async edit(){
                console.log(this.editData)
                this.editData.projectList =  this.editData.projectList.map(item => Number(item))
                if (this.editData.name && this.editData.projectList.length !== 0 && this.editData.setTime){
                    const { data } = await logisticsEdit(this.editData)
                    if (data.code === 200) {
                        console.log(JSON.stringify({
                            id: 100002,
                            flag: true
                        }))
                        this.$message.success(data.message)
                        this.editDialog = false
                        await this.getPage()
                    }
                } else {
                    this.$message.error('请将参数填写完整!!!')
                }
			}
			
        }
    }
</script >

<style scoped lang="less">
	.logistics-body{
		width: 100%;
		height: calc(100% - 50px);
		background-color: #ffffff;
		.body-header{
			width: 100%;
			height: 50px;
			display: flex;
			margin-bottom: 20px;
			align-items: center;
			justify-content: flex-end;
		}
		.body-table {
			width: 100%;
			max-height: calc(100% - 150px);
		}
		.body-page{
			width: 100%;
			height: 50px;
			margin-top: 20px;
			display: flex;
			align-items: center;
			justify-content: center;
		}
		
	}
</style >
